<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="format-detection" content="telephone=no, email=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title>移动端测试页面</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            html, body {
                width: 100%;
                height: 100%;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: #fff;
                font-size: 16px;
                padding: 20px;
            }
            
            .container {
                text-align: center;
                max-width: 90%;
            }
            
            h1 {
                font-size: clamp(24px, 5vw, 48px);
                margin-bottom: 20px;
                animation: fadeIn 1s ease-in;
            }
            
            p {
                font-size: clamp(14px, 3vw, 18px);
                line-height: 1.6;
                opacity: 0.9;
            }
            
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            /* 移动端优化 */
            @media screen and (max-width: 768px) {
                body {
                    font-size: 14px;
                }
            }
            
            /* 横屏适配 */
            @media screen and (orientation: landscape) and (max-height: 500px) {
                body {
                    padding: 10px;
                }
                h1 {
                    margin-bottom: 10px;
                }
            }
            
            /* 按钮样式 */
            .btn {
                display: inline-block;
                padding: 12px 32px;
                margin-top: 30px;
                font-size: 16px;
                font-weight: 500;
                color: #667eea;
                background: #fff;
                border: none;
                border-radius: 25px;
                cursor: pointer;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease;
                -webkit-tap-highlight-color: transparent;
            }
            
            .btn:active {
                transform: scale(0.95);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }
            
            .btn:hover {
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
                transform: translateY(-2px);
            }
            
            .info-box {
                margin-top: 20px;
                padding: 15px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                font-size: 14px;
                line-height: 1.8;
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
            }
            
            .status {
                margin-top: 15px;
                padding: 10px;
                background: rgba(255, 255, 255, 0.15);
                border-radius: 8px;
                font-size: 13px;
                word-break: break-all;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Hello World!</h1>
            <p>移动端自适应测试页面</p>
            
            <button class="btn" id="loginBtn">调用APP登录</button>
            
            <div class="info-box">
                <div>📱 Bridge状态: <span id="bridgeStatus">初始化中...</span></div>
                <div class="status" id="responseStatus">等待操作...</div>
            </div>
        </div>
    </body>
        <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>
    <script>
        console.log(navigator.userAgent)
    </script>
    <script>;(function() {
    if (window.WKWebViewJavascriptBridge) {
        return;
    }

    if (!window.onerror) {
        window.onerror = function(msg, url, line) {
            console.log("WKWebViewJavascriptBridge: ERROR:" + msg + "@" + url + ":" + line);
        }
    }
    window.WebViewJavascriptBridge = {
        registerHandler: registerHandler,
        callHandler: callHandler,
        disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
        _fetchQueue: _fetchQueue,
        _handleMessageFromObjC: _handleMessageFromObjC
    };

    var messagingIframe;
    var sendMessageQueue = [];
    var messageHandlers = {};
    
    var CUSTOM_PROTOCOL_SCHEME = 'https';
    var QUEUE_HAS_MESSAGE = '__wvjb_queue_message__';
    
    var responseCallbacks = {};
    var uniqueId = 1;
    var dispatchMessagesWithTimeoutSafety = true;

    function registerHandler(handlerName, handler) {
        messageHandlers[handlerName] = handler;
    }
    
    function callHandler(handlerName, data, responseCallback) {
        if (arguments.length == 2 && typeof data == 'function') {
            responseCallback = data;
            data = null;
        }
        _doSend({ handlerName:handlerName, data:data }, responseCallback);
    }
    function disableJavscriptAlertBoxSafetyTimeout() {
        dispatchMessagesWithTimeoutSafety = false;
    }
    
    function _doSend(message, responseCallback) {
        if (responseCallback) {
            var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
            responseCallbacks[callbackId] = responseCallback;
            message['callbackId'] = callbackId;
        }
        sendMessageQueue.push(message);
        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
    }

    function _fetchQueue() {
        var messageQueueString = JSON.stringify(sendMessageQueue);
        sendMessageQueue = [];
        return messageQueueString;
    }

    function _dispatchMessageFromObjC(messageJSON) {
        if (dispatchMessagesWithTimeoutSafety) {
            setTimeout(_doDispatchMessageFromObjC);
        } else {
             _doDispatchMessageFromObjC();
        }
        
        function _doDispatchMessageFromObjC() {
            var message = JSON.parse(messageJSON);
            var messageHandler;
            var responseCallback;

            if (message.responseId) {
                responseCallback = responseCallbacks[message.responseId];
                if (!responseCallback) {
                    return;
                }
                responseCallback(message.responseData);
                delete responseCallbacks[message.responseId];
            } else {
                if (message.callbackId) {
                    var callbackResponseId = message.callbackId;
                    responseCallback = function(responseData) {
                        _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
                    };
                }
                
                var handler = messageHandlers[message.handlerName];
                if (!handler) {
                    console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
                } else {
                    handler(message.data, responseCallback);
                }
            }
        }
    }
    
    function _handleMessageFromObjC(messageJSON) {
        _dispatchMessageFromObjC(messageJSON);
    }

    messagingIframe = document.createElement('iframe');
    messagingIframe.style.display = 'none';
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
    document.documentElement.appendChild(messagingIframe);

    registerHandler("_disableJavascriptAlertBoxSafetyTimeout", disableJavscriptAlertBoxSafetyTimeout);
    
    setTimeout(_callWVJBCallbacks, 0);
    function _callWVJBCallbacks() {
        var callbacks = window.WVJBCallbacks;
        delete window.WVJBCallbacks;
        for (var i=0; i<callbacks.length; i++) {
            callbacks[i](WebViewJavascriptBridge);
        }
    }
})();</script>

    <script>
        // 业务逻辑代码
        (function() {
            var bridge = null;
            var bridgeReady = false;
            
            // 更新状态显示
            function updateStatus(message, isError) {
                var statusEl = document.getElementById('responseStatus');
                if (statusEl) {
                    statusEl.textContent = message;
                    statusEl.style.background = isError ? 'rgba(255, 82, 82, 0.3)' : 'rgba(255, 255, 255, 0.15)';
                }
                console.log('[Status]', message);
            }
            
            // 更新Bridge状态
            function updateBridgeStatus(status) {
                var bridgeStatusEl = document.getElementById('bridgeStatus');
                if (bridgeStatusEl) {
                    bridgeStatusEl.textContent = status;
                }
            }
            
            // 初始化Bridge
            function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) {
                    callback(window.WebViewJavascriptBridge);
                } else {
                    document.addEventListener('WebViewJavascriptBridgeReady', function() {
                        callback(window.WebViewJavascriptBridge);
                    }, false);
                }
            }
            
            // 调用APP的loginAction方法
            function callLoginAction() {
                if (!bridgeReady) {
                    updateStatus('❌ Bridge未就绪，请稍后再试', true);
                    alert('Bridge未就绪，请在APP环境中打开');
                    return;
                }
                
                updateStatus('⏳ 正在调用APP登录...');
                
                // 准备传递给APP的数据
                var loginData = {
                    source: 'h5',
                    timestamp: new Date().getTime(),
                    userAgent: navigator.userAgent
                };
                
                console.log('[Call] 调用loginAction，参数:', loginData);
                
                // 调用APP的loginAction方法
                bridge.callHandler('loginAction', loginData, function(response) {
                    console.log('[Response] APP返回数据:', response);
                    
                    if (response) {
                        var responseText = typeof response === 'string' ? response : JSON.stringify(response, null, 2);
                        updateStatus('✅ 登录成功！\n返回数据: ' + responseText);
                    } else {
                        updateStatus('✅ 调用成功，无返回数据');
                    }
                });
            }
            
            // 页面加载完成后初始化
            window.addEventListener('DOMContentLoaded', function() {
                console.log('[Init] 页面加载完成，开始初始化Bridge');
                
                // 初始化WebViewJavascriptBridge
                setupWebViewJavascriptBridge(function(bridgeInstance) {
                    bridge = bridgeInstance;
                    bridgeReady = true;
                    updateBridgeStatus('✅ 已连接');
                    updateStatus('✅ Bridge已就绪，可以调用APP方法');
                    console.log('[Init] Bridge初始化成功');
                    
                    // 注册一个H5方法供APP调用（可选）
                    bridge.registerHandler('h5LoginCallback', function(data, responseCallback) {
                        console.log('[Receive] APP调用h5LoginCallback:', data);
                        updateStatus('📥 收到APP回调: ' + JSON.stringify(data));
                        
                        // 回复APP
                        if (responseCallback) {
                            responseCallback({
                                status: 'success',
                                message: 'H5已收到登录回调'
                            });
                        }
                    });
                });
                
                // 绑定按钮点击事件
                var loginBtn = document.getElementById('loginBtn');
                if (loginBtn) {
                    loginBtn.addEventListener('click', function() {
                        console.log('[Click] 登录按钮被点击');
                        callLoginAction();
                    });
                }
                
                // 检测是否在APP环境中
                setTimeout(function() {
                    if (!bridgeReady) {
                        updateBridgeStatus('⚠️ 未检测到APP环境');
                        updateStatus('⚠️ 当前不在APP环境中，Bridge功能不可用');
                        console.warn('[Warning] 未检测到WebViewJavascriptBridge');
                    }
                }, 1000);
            });
            
            // 暴露到全局，方便调试
            window.testLoginAction = callLoginAction;
            console.log('[Debug] 可以在控制台执行 testLoginAction() 来测试');
        })();
    </script>
</html>
